<template>
  <div>
    <div v-if="Visitdate.length">
      <div
        style="border-bottom: 3px solid #f4f5f7; margin-bottom: 30px"
        v-for="(item_, index_) in Visitdate"
        :key="item_ + index_"
        :ref="item_"
      >
        <el-form ref="form" :model="item_" label-width="120px">
          <el-row>
            <el-col>
              <el-form-item :label="'企业需求' + (index_ + 1)">
                <el-input
                  :disabled="true"
                  :autosize="{ minRows: 3, maxRows: 10 }"
                  type="textarea"
                  v-model="item_.des"
                >
                </el-input>
              </el-form-item>
            </el-col>

            <el-col class="bo_primary">
              <el-button
                v-if="item_.status == '0'"
                class="bo_primary_i"
                type="primary"
                round
                @click="addprogramme"
              >
                未解决
              </el-button>
              <el-button
                v-else
                class="bo_primary_i2"
                type="primary"
                round
                @click="addprogramme"
              >
                已解决
              </el-button>
            </el-col>

            <el-col class="el-form-item">
              <el-col>
                <el-form-item label="需求标签">
                  <div>
                    <el-tag
                      v-for="item_1 in item_.label_arr"
                      :key="item_1.id"
                      class="b_bule b_red"
                      >{{ item_1.name }}</el-tag
                    >
                  </div>
                </el-form-item>
              </el-col>

              <el-col :span="12" class="qw_date">
                <el-form-item class="" label="期望解决时间">
                  <el-date-picker
                    :disabled="true"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder=""
                    v-model="item_.solve_time"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>

              <el-col>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="解决人">
                      <el-input disabled :placeholder="item_.vo_id_name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="解决时间">
                      <el-input :disabled="true" v-model="item_.so_time"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>

              <el-col>
                <el-form-item label="解决方案">
                  <el-input
                    :disabled="true"
                    type="textarea"
                    v-model="item_.solve_des"
                    :autosize="{ minRows: 3, maxRows: 10 }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="解决方案附件" class="upload_box">
                  <el-upload
                    class="upload-demo1"
                    id="b_upload"
                    ref="upload2"
                    action=""
                    :disabled="true"
                    :on-preview="handlePreview"
                    :on-change="upload_success"
                    :file-list="item_.fileObj"
                    :before-remove="beforeRemove"
                  >
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <el-row v-else>
      <el-empty description="暂无走访记录"></el-empty>
    </el-row>
  </div>
</template>

<script>
import { companyDemand } from "@/api/newuser";

export default {
  data() {
    return {
      Visitdate: [],
    };
  },
  watch: {
    company_id: {
      handler(newV, oldV) {
        this.companyDemand();
      },
      deep: true,
    },
  },
  props: {
    company_id: {
      type: Number,
      default: () => 0,
    },
  },
  components: {},
  mounted() {
    this.companyDemand();
  },
  methods: {
    beforeRemove() {
      return false;
    },
    addprogramme() {
      this.d_add = true;
    },
    companyDemand() {
      companyDemand({ limit: 99, company_id: this.company_id }).then((res) => {
        let imgList = [];
        if (res.list) {
          res.list.map((res_, index) => {
            if(res_.solve_file){
              let imgObj = {
                url: "",
                name: "",
              };
              imgObj.url = res_.solve_file;
              imgObj.name = res_.solve_name;
              imgList.push(imgObj);
              res.list[index].fileObj = imgList;
            }
          });
        }
        console.log(res.list, "this.Visitdate.fileObj");
        console.log(imgList, "this.Visitdate.fileObj");
        this.Visitdate = res.list;

        console.log(this.Visitdate, "this.Visitdate.fileObj");
      });
    },
    handlePreview(file, fileList) {
      window.open(file.url);
    },
    upload_success(file, fileList) {},
  },
};
</script>

<style scoped lang="less">
::v-deep .upload-demo1 .el-upload {
  display: none;
}
::v-deep .el-form-item {
  margin-bottom: 22px;
}
.bo_primary_i {
  margin-left: 5px;
  background-color: #999999;
  color: #ffffff;
  border: none;
  padding: 7px 40px;
}

.bo_primary_i2 {
  padding: 7px 40px;
}
.b_bule {
  background-color: #d3e2ff;
  margin: 3px 5px;
  border-radius: 5px;
  color: #4585ff;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  border: 0;
}

.b_red {
  color: #ff5f58;
  background-color: #fff6f5;
}

@media (max-width: 1360px) {
}

@media (max-width: 1280px) {
}

@media (max-width: 768px) {
}
</style>
